/**
 * @author temsa
 * Tells the Slide Manager when to change Slides
 *
 * @class Slidy.components.slideCounter
 * @name Slidy.components.slideCounter
 * @extends Archetype.component.abstractComponent
 */
$C.create(
/** @scope Slidy.components.slideCounter.prototype */
{
    name: "Slidy.components.slideCounter",
    setup: {
        dependencies: {
            components: {},
            lib: ["Archetype.template.trimpathTemplate"]
        }
    },
    /**
     * Constructor
     */
    initialize: function(/*String*/altCssClass){
        //must not be initialized in the prototype!
        this.template = new Archetype.Templates.TrimpathTemplate("${current}${separator}${total}");
        this.currentSlide= 0;
        this.slideDisplayClass= "basicSlideDisplay";

        this.main(altCssClass);
    },
    //--------------------------------------------
    //some hardcoded configuration
    //currentSlide: 0,
    //slideDisplayClass: "basicSlideDisplay",
    //--------------------------------------------
    /**
     * Start the Component itself
     * @param {String} altCssClass : alternative css class for click receiver
     */
    main: function(/*String*/altCssClass){
        if (typeof altCssClass == "string")
            this.clickReceiverCssClass = clickReceiverCssClass;

        // get all the slide containers available.
        this.containers = $$("." + this.clickReceiverCssClass);

        $$("." + this.clickReceiverCssClass).each(function(elt){
            $(elt).observe("click", this.fireNextSlide);
            Logger.debug(" Added an observer on :", elt);
        }.bind(this));
    },
    /**
     * Display a basic
     * @param {DOM Element} element
     */
    _display: function(element){
        var options = {
            current: this.currentSlide,
            separator: "",
            total: ""
        }
        if (typeof this.totalSlide != "undefined")
            Object.extend(options, {
                separator: " / ",
                total: this.totalSlide
            });
        $(element).update(this.template.evaluate(options));
    },
    _displayAll: function(){
        $$("." + this.slideDisplayClass).each(this.display);
    },
    onSlideChanged: function(eventName, currentSlide){
        this.fireGetTotalSlides();
        this.currentSlide = currentSlide;
        this.displayAll();
    },
    fireGetTotalSlides: _,
    onSetTotalSlides: function(eventName, totalSlide){
        this.totalSlide = totalSlide;
    }//,
});
